<!-- 使用iconfont图标 -->
<template>
	<div :style="[{width: sizeValue + 'px', height: sizeValue + 'px', position: 'relative', cursor}]" :onClick="`event.cancelBubble = ${cancelBubble}`" @click="onClick">
		<div style="position: absolute;inset: 0;" class="center">
			<uni-icons :custom-prefix="!isSystemIcon && customPrefix" :type="(isSystemIcon ? '' : typePrefix) + type" :size="sizeValue" :color="disabled ? core.theme.color.disabled : (color || core.theme.color.icon)" :style="[rotate ? {transform: `rotate(${rotate}deg)`} : {}]"></uni-icons>
		</div>
		<slot></slot>
	</div>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	/**
	 * 支持使用系统图标：isSystemIcon=true
	 * 没有指定isSystemIcon时。默认使用iconfont图标，图标前缀是icon-
	 */
	
	export default {
		extends: base,
		emits: ['click'],
		props: {
			// 图标的名称
			type: String,
			// 旋转的角度
			rotate: {
				type: [String, Number],
				default: 0
			},
			// 是否禁用
			disabled: Boolean,
			/**
			 * 是否阻隔事件传递。该值对小程序无效。
			 * 对策：
			 * 1，外面包一层div使用click.stop=e => core.common.onStop(e)
			 * 2，event.stopPropagation()
			 * 实测2无效！
			 */
			cancelBubble: Boolean,
			// 图标的颜色。不传默认使用主题颜色中图标默认颜色
			color: String,
			// 图标尺寸。都是宽高一致的矩形
			size: [String, Number],
			// 是否使用系统图标
			isSystemIcon: Boolean,
			// 自定义图标前缀
			customPrefix: {
				type: String,
				default: 'iconfont'
			},
			// 图标类型前缀
			typePrefix: {
				type: String,
				default: 'icon-'
			},
			/**
			 * 光标类型
			 * pointer：鼠标手型
			 * not-allowed：鼠标禁止
			 * zoom-in：鼠标放大
			 * zoom-out：鼠标缩小
			 * grab：鼠标拖拽
			 * crosshair: 鼠标十字
			 * https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor
			 */
			cursor: String
		},
		data() {
			return {

			}
		},
		computed: {
			// 图标尺寸
			sizeValue() {
				return this.size || 16
			}
		},
		methods: {
			// 点击事件
			onClick(event) {
				if (this.disabled) {
					
				} else {
					if (this.cancelBubble) {
						/**
						 * cancelBubble在小程序中不生效
						 * 须使用click.stop => onStop事件
						 * 但是click.stop会完全阻隔父组件接收事件，无法解决这个矛盾
						 */
						event.stopPropagation && event.stopPropagation() // 阻止事件冒泡
						this.$emit('click')
					} else {
						this.$emit('click')
					}
				}
			}
		}
	}
</script>

<style>
</style>